<template>
    <div class="page">
        <swiperP :list="BannerList" :height="400"></swiperP>

        <div class="company">
            <img class="company-img" :src="`${_oss_}images/about-me/gsjj.png`" />
            <div class="company-txt">
                华锐视点是一家从事VR、AR、AI、元宇宙等内容制作的公司。
                先后在北京、上海、深圳、广州、西安、太原、鞍山、香港设立分公司。
                公司致力于为客户提供高质量的虚拟现实和增强现实技术解决方案，
                以及元宇宙内容的开发和制作。十八年来，
                华锐视点的产品和服务应用于多个行业，如教育、工业、商业、医疗、文旅等，
                帮助客户提高效率、降低成本、提升用户体验。
            </div>
        </div>
        <NuxtImg alt="VR线上展会" :src="_oss_ + 'images/about-me/2.jpg'" />
        <NuxtImg alt="VR线上展会" :src="_oss_ + 'images/about-me/3.jpg'" />
        <NuxtImg alt="VR线上展会" :src="_oss_ + 'images/about-me/4.jpg'" />
        <NuxtImg alt="VR线上展会" :src="_oss_ + 'images/about-me/5.jpg'" :style="{
            width: '66.6%',
            margin: '0 0 40px 16.6%',
        }" />
    </div>
</template>
<script setup>
import { useContent } from ".";

const { BannerList, GetBannerList } = useContent();

await GetBannerList(263);
</script>
<style lang="scss" scoped>
.page {
    position: relative;

    .bg {
        width: 100%;
        height: 280px;
        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/about-me/bg.jpg");
        background-position: center center;
    }

    img {
        width: 100%;
    }

    .company {
        width: 65%;
        padding: 50px 0;
        margin: 0 auto;

        .company-img {
            display: block;
            width: 180px;
            margin: 0 auto;
        }

        .company-txt {
            margin-top: 30px;
            line-height: 2em;
            color: #333;
            font-size: 20px;
        }
    }
}
</style>
